<script setup>
import { ref, watch,defineEmits } from 'vue';
import axios from 'axios';

const props = defineProps({
  dialogVisible: Boolean,
  bookId: Number
});


const dialogVisibleInner = ref(false);
const book = ref({});


watch(() => props.dialogVisible, (newVal) => {
  console.log("newVal",newVal)
  if (newVal) {
    findById();
  }
});


function findById() {
  axios.get(`/book/findById/${props.bookId}`).then(resp => {
    book.value = resp.data;
    dialogVisibleInner.value = true;
  });
}

const emit = defineEmits();

function handlerClose() {
  dialogVisibleInner.value = false;
  emit('close', false);
}
</script>

<template>
  <el-dialog v-model="dialogVisibleInner" title="书籍详情" @close="handlerClose">
    <div class="dialog-content">
      <div class="book-image">
        <img :src="$urlImage + book.imgSrc" alt="书籍详情">
      </div>
      <div class="book-info">
        <h2 class="title">《{{ book.name }}》</h2>
        <p class="author">作者：{{ book.author }}</p>
        <p class="publisher">出版社：{{ book.publisher }}</p>
        <p class="price">价格：&yen;{{ book.price }}</p>
        <el-divider></el-divider>
        <p class="intro">{{ book.detail }}</p>
        <div class="button-group">
          <el-button type="warning" size="medium" icon="el-icon-shopping-cart-full">加入购物车
          </el-button>
          <el-button type="primary" size="medium" @click="handlerClose" icon="el-icon-circle-close">关闭</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.dialog-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.book-image {
  width: 30%;
  text-align: center;
}

.book-image img {
  max-width: 100%;
  height: auto;
}

.book-info {
  width: 68%;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 6px;
}

.author {
  font-size: 18px;
  margin: 0 0 4px;
}

.publisher,
.price {
  font-size: 16px;
  margin: 0 0 2px;
}

.intro {
  font-size: 14px;
  margin: 0 0 10px;
}

.button-group {
  display: flex;
  justify-content: flex-end;
}
</style>